<template>
	<div class="pages">
		<div class="title">数据统计</div>
		<el-row :gutter="20">
			<el-col :span="6">
				<div class="grid-content">
					<img src="@/assets/img/to1.png" alt="" width="60" height="60" />
					<div class="item">
						<div class="item1">工厂数量</div>
						<div class="item2">{{dataForm.factory_num}}</div>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content">
					<img src="@/assets/img/to2.png" alt="" width="60" height="60" />
					<div class="item">
						<div class="item1">企业数量</div>
						<div class="item2">{{dataForm.corp_num}}</div>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content">
					<img src="@/assets/img/to3.png" alt="" width="60" height="60" />
					<div class="item">
						<div class="item1">需求数量</div>
						<div class="item2">{{dataForm.total_xuqiu}}</div>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content">
					<img src="@/assets/img/to4.png" alt="" width="60" height="60" />
					<div class="item">
						<div class="item1">合同数量</div>
						<div class="item2">{{dataForm.total_yiqian}}</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="20" style="margin-top: 20px;">
			<el-col :span="6">
				<div class="grid-content">
					<img src="@/assets/img/to5.png" alt="" width="60" height="60" />
					<div class="item">
						<div class="item1">创制券余额</div>
						<div class="item2">{{dataForm.shengyu}}</div>
					</div>
				</div>
			</el-col>
			<el-col :span="18"></el-col>
		</el-row>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				dataForm: {
					corp_num: 0,
					factory_num: 0,
					level_1_orders: 0,
					level_2_orders: 0,
					level_3_orders: 0,
					total_coupons_num: 0,
					total_xuqiu: 0,
					total_yiqian: 0,
					shengyu:0,
				}
			}
		},
		methods: {
			getInfo(){
				this.$loading()
				this.$http.post('/api/tongji/tongji', {}).then(res => {
					this.$closeLoading()
					this.dataForm = {
						...this.dataForm,
						...res.result
					}
				})
			},
		},
		created() {
			this.getInfo()
		}
	}
</script>
<style lang="scss" scope>
	.title {
		margin-bottom: 30px;
		font-weight: 500;
		font-size: 18px;
		color: #333333;
		line-height: 25px;
		text-align: left;
		font-style: normal;
	}

	.grid-content {
		background: #F6F7FA;
		border-radius: 6px;
		display: flex;
		align-items: center;
		padding-left: 40px;
		padding-top: 30px;
		padding-bottom: 30px;

		.item {
			text-align: left;
			padding-left: 27px;

			.item1 {
				font-weight: 400;
				font-size: 15px;
				color: #333333;
				line-height: 21px;
				font-style: normal;
			}

			.item2 {
				font-weight: 600;
				font-size: 24px;
				color: #333333;
				line-height: 33px;
				font-style: normal;
				margin-top: 7px;
			}
		}
	}
</style>